<template>
	<view class="nearby-classify e-rela">
		<view class="e-abso fixed-classify-item" v-if="allList.length">
			<view class="nearby-classify__item e-m-b-30" @tap="jump(allList[0].id, 0)">
				<view class="e-flex-xy-center">
					<view class="nearby-all" :style="{color: AppSkin.primary}">

					</view>
				</view>
				<view class="text-center e-m-t-20 e-font-24 c-31">{{ allList[0].name }}</view>
			</view>
		</view>
		<scroll-view scroll-x="true">
			<view class="e-flex e-flex-items-start e-p-t-20">
				<view class="nearby-classify__item e-m-b-30" v-for="(item, index) in allList" :key="item.id"
					@tap="jump(item.id, index)">
					<view class="e-flex-xy-center">
						<load-image v-if="index" mode="aspectFill" size="92rpx" :src="item.icon">
						</load-image>
						<view v-else class="nearby-all" :style="{color: AppSkin.primary}">

						</view>
					</view>
					<view class="text-center white-nowrap e-m-t-20 e-font-24 c-31" :class="{'c-333 fw-600':menuIndex === item.id}">
						{{ item.name }}
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 全部 -->
		<e-popup :show="show" mode="top" @close="show = false" >
			<scroll-view class="copy-classify" scroll-y="true">
				<view class="e-flex e-flex-items-start e-flex-wrap">
					<view class="copy-classify__item e-flex" :class="{ 'copy-classify--active': menuIndex === item.id }"
						v-for="(item, index) in list" :key="index" @tap="handleClick(item.id)">
						<view>
							<view class="e-flex-xy-center">
								<view class="copy-classify__item-img e-flex-xy-center">
									<view>
										<load-image mode="aspectFill" :size="menuIndex === item.id ? '80rpx' : '72rpx'"
											:src="item.icon">
										</load-image>
									</view>
								</view>
							</view>
							<view class="copy-classify__item-name e-font-26 e-m-t-10"
								:style="{color: menuIndex === item.id ? '#fff':'', backgroundColor: menuIndex === item.id ? AppSkin.primary:''}">
								<text>{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<view class="pop-bottom e-flex e-flex-xy-center" @tap="show = false">
				<text>{{$t('common.点击收起')}}</text>
			</view>
		</e-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import type { ClassifyItem } from '@/common/request/api'
	import {useCurrentInstance
	} from '@/common/hooks'
	
	const props = defineProps<{
		value : number
		list : ClassifyItem[]
		allList : ClassifyItem[]
	}>()

	const emit = defineEmits(['update:value'])
	
	const ctx = useCurrentInstance()

	const show = ref(false)
	const menuIndex = computed({
		get() {
			return props.value
		},
		set(v) {
			emit('update:value', v)
		}
	})


	const handleClick = (id : number) => {
		show.value = false
		jump(id, 1)
	}
	const jump = (id : number, index : number) => {
		if (index) {
			menuIndex.value = id
			ctx.$goTo('/pages/nearby/searchResult',  {
				categoryOne: id
			})
		} else {
			show.value = true
		}

	}
</script>
<style scoped lang="scss">
	.nearby-all {
		font-family: "allFontIconfont" !important;
		font-size: 46px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;

		&:before {
			content: "\e624";
		}
	}

	.c-31 {
		color: #313133;
	}

	.fixed-classify-item {
		width: calc(100vw / 5);
		z-index: 999;
		background-color: #fff;
		padding-top: 20rpx;
	}

	.nearby-classify {
		margin-top: -36rpx;
		border-radius: 20rpx;
		position: relative;
		z-index: 5;
		background-color: #fff;
		overflow: hidden;

		&__swiper {
			width: 100vw;
			height: 204rpx;
			padding: 30rpx;
		}

		&__box {
			overflow: hidden;
		}

		&__item {
			flex-shrink: 0;
			min-width:118rpx;
			padding:0 8rpx;
			&:first-child{
				min-width:20vw;
			}
		}

		&__indicators {
			bottom: 0;
			left: 50%;
			z-index: $z-index-normal;
			transform: translateX(-50%);

			>view {
				width: 8rpx;
				height: 8rpx;
				background: #E3E3E3;
				border-radius: 50%;
			}

			.is-active {
				width: 32rpx;
				border-radius: 4rpx;
				background: var(--color-primary);
			}

		}
	}

	.pop-bottom {
		width: 100vw;
		height: 80rpx;
		background: #F7F7F7;
		box-shadow: 0px 12rpx 20rpx 0px rgba(0, 0, 0, 0.03);
		border-radius: 0px 0px 20rpx 20rpx;
	}

	.copy-classify {
		max-height:60vh;

		&__item {
			flex: 0 0 calc(100vw / 5);
			justify-content: center;
			margin-bottom: 30rpx;

			&-img {
				width: 92rpx;
				height: 92rpx;
				border-radius: 58rpx;
				border-width: 4rpx;
				border-style: solid;
				border-color: transparent;

				>view {
					width: 72rpx;
					height: 72rpx;
				}
			}

			&-name {
				padding: 2rpx 10rpx;
				border-radius: 20px;
				color: #303133;
				text-align: center;
			}
		}

		&--active {
			.copy-classify__item-img {
				width: 100rpx;
				height: 100rpx;
				border-color: var(--color-primary);

				>view {
					width: 80rpx;
					height: 80rpx;
				}
			}

			&-name {
				background-color: var(--color-primary);
				color: #ffffff;
			}
		}
	}
</style>